<template>
	<div>

		<div class="app-container">

			<TopInfo />

			<div class="mt-6 text-right">
				<el-button v-prmis="'template_add'" type="primary" @click="add">{{ $t('presets.info.add') }}</el-button>
			</div>

		</div>

		<div class="app-container" v-loading="data.mtloading">

			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full">

				<el-table-column prop="id" label="ID" />

				<el-table-column prop="name" :label="$t('presets.info.name')" show-overflow-tooltip />

				<el-table-column prop="resolution" :label="$t('presets.info.resolution')" show-overflow-tooltip />

				<el-table-column prop="creator_nickname" :label="$t('source.creater')" show-overflow-tooltip />

				<el-table-column prop="create_time" :label="$t('date.createTime')" show-overflow-tooltip>
					<template #default="scope">
						{{ getPlevel.gettime(scope.row.create_time, 3) }}
					</template>
				</el-table-column>

				<el-table-column :label="$t('public.operate')">
					<template #default="scope">
						<el-button size="small" type="success" @click="addition(scope.row)">{{ $t('public.layout')
							}}</el-button>
						<el-button v-prmis="'template_update'" size="small" type="warning" @click="modify(scope.row)">{{
							$t('public.modify') }}</el-button>
						<el-button v-prmis="'template_del'" size="small" type="danger" @click="del(scope.row.id)">{{
							$t('public.del')}}</el-button>
					</template>
				</el-table-column>

			</el-table>

			<PageNum :total="data.total" :page="data.source" @exposeData="current" @fraction="fraction" />

		</div>


		<el-dialog v-model="data.demonstrate" center width="30%" :title="$t('presets.info.templateInfo')">
			<el-form v-if="data.demonstrate" :model="data.info" :rules="data.rules" :label-width="language=='en'?'130':'100px'"
				ref="ruleFormRef">

				<el-form-item :label="$t('presets.info.name') + ':'" prop="name">
					<el-input v-model="data.info.name" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>

				<el-form-item :label="$t('presets.info.resolution') + ':'" prop="resolution">
					<el-input v-model="data.info.resolution" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>

				<div class="ml-6 mb-4 text-[#F56C6C]">
					{{ $t('presets.info.note') }} <span class="text-sm font-bold mx-0.5">1080*1920</span> {{
						$t('presets.info.screenResolution') }}
				</div>

				<div class="w-full text-center">
					<div class="inline-block">
						<el-button type="primary" @click="submit(ruleFormRef)">{{ $t('public.save') }}</el-button>
						<el-button @click="data.demonstrate = false">{{ $t('public.cancel') }}</el-button>
					</div>
				</div>

			</el-form>
		</el-dialog>

	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import getPlevel from '@/utils/level'
import { gettemplateList, addtemplate, updatetemplate, deltemplate } from '@/api/presets';
import { useRouter } from "vue-router";
import { onMounted } from 'vue'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
	language.value = locale.value
})
let ruleFormRef = ref<any>();
const router = useRouter()

let data = reactive({
	mtloading: false, // 加载
	demonstrate: false, // 弹窗
	list: [], // 列表信息
	rules: { // 表单验证
		name: { required: true, message:  $t('message.pleaseEnter'), trigger: 'blur' },
		resolution: { required: true, message:  $t('message.pleaseEnter'), trigger: 'blur' },
	},
	info: {}, // 添加/修改内容
	source: { // 筛选数据
		page: 1,
		pageNum: 15
	},
	total: 0, // 总条数
})

// 获取列表信息
let getlist = () => {
	data.mtloading = true
	gettemplateList(data.source).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	})
}

// 添加模板
let add = () => {
	data.info = {
		name: '',
		resolution: ''
	}
	data.demonstrate = true
}

// 修改模板
let modify = (e) => {
	data.info = {
		id: e.id,
		name: e.name,
		resolution: e.resolution
	}
	data.demonstrate = true
}

// 删除模板
let del = (e) => {
	ElMessageBox.confirm($t('message.delData'))
		.then(res => {
			deltemplate({ id: e }).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.delSuccess'),
						type: 'success'
					})
					data.demonstrate = false
					getlist()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		}).catch(err => {
			console.log('取消')
		})
}

// 添加模板布局
let addition = (e) => {
	let query = {
		l: encodeURI(JSON.stringify({
			info: e
		}))
	}
	router.push({ path: '/presets/info/distribution', query: query })
}

// 数据提交
let submit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid, fields) => {
		if (valid) {
			if (data.info.id == undefined) {
				// 添加模板
				addtemplate(data.info).then(res => {
					if (res.state == 200) {
						ElMessage({
							message: $t('message.addSuccess'),
							type: 'success'
						})
						data.demonstrate = false
						getlist()
						return
					}
					ElMessage({
						message: $t('message.networkFailed'),
						type: 'error'
					})
				})
			} else {
				// 修改模板
				updatetemplate(data.info).then(res => {
					if (res.state == 200) {
						ElMessage({
							message: $t('message.modifySuccess'),
							type: 'success'
						})
						data.demonstrate = false
						getlist()
						return
					}
					ElMessage({
						message: $t('message.networkFailed'),
						type: 'error'
					})
				})
			}
			console.log(data.info)
		}
	})
}

// 页数回调
let current = (e) => {
	data.source.page = e
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.source.pageNum = e
	getlist()
}

getlist()

</script>
